<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1026 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M856.098033 0c-93.173451 0-168.983362 75.799709-168.983362 168.97316 0 27.565385 6.763823 53.529081 18.526551 76.544444L316.859107 438.036623c-28.840616-52.049814-84.287644-87.389005-147.875745-87.389005-93.173451 0-168.983362 75.799709-168.983362 168.97316s75.809911 168.983362 168.983362 168.983362c56.018331 0 105.629904-27.524578 136.388467-69.637795l228.113256 165.361707c-9.977405 21.546297-15.70064 45.428816-15.70064 70.698787 0 93.173451 75.799709 168.97316 168.97316 168.97316 93.163249 0 168.983362-75.799709 168.983362-168.97316 0-93.183653-75.830315-168.983362-168.983362-168.983362-49.948234 0-94.764939 21.903361-125.717337 56.487616L328.754458 574.14964c5.866061-17.1391 9.191862-35.431008 9.191862-54.528862 0-11.813737-1.244625-23.341822-3.550242-34.472035l400.728476-198.415685c30.717756 31.554307 73.575707 51.233666 120.963277 51.233666 93.173451 0 168.97316-75.809911 168.97316-168.97316C1025.060992 75.809911 949.271485 0 856.098033 0zM686.757607 736.052922c65.597864 0 118.973918 53.365852 118.973918 118.973918 0 65.597864-53.376054 118.953514-118.973918 118.953514-65.608066 0-118.963716-53.35565-118.963716-118.953514C567.793891 789.418774 621.149541 736.052922 686.757607 736.052922zM168.983362 638.594696c-65.597864 0-118.973918-53.365852-118.973918-118.973918 0-65.597864 53.365852-118.963716 118.973918-118.963716 65.608066 0 118.973918 53.365852 118.973918 118.963716C287.947078 585.228844 234.581226 638.594696 168.983362 638.594696zM856.098033 287.947078c-65.608066 0-118.973918-53.365852-118.973918-118.963716 0-65.608066 53.365852-118.963716 118.973918-118.963716s118.953514 53.35565 118.953514 118.963716C975.051547 234.581226 921.695897 287.947078 856.098033 287.947078z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
